import React from 'react';
import { withStyles } from '@material-ui/core/styles';
import {
  ExpansionPanel, ExpansionPanelSummary, ExpansionPanelDetails, Typography,
} from '@material-ui/core';
import { ExpandMore } from '@material-ui/icons';
import { MaterialLayoutRenderer } from '@jsonforms/material-renderers/lib/util/layout';


const styles = theme => ({
  root: {
    width: '100%',
  },
  heading: {
    fontSize: theme.typography.pxToRem(15),
    fontWeight: theme.typography.fontWeightRegular,
  },
});

function AccordionPanel(props) {
  const {
    uischema, schema, path, visible, classes,
  } = props;

  const expansionLayout = uischema;

  const childProps = {
    elements: expansionLayout.elements,
    schema,
    path,
    direction: 'column',
    visible,
  };

  const style = { marginBottom: '5px' };
  if (!visible) {
    style.display = 'none';
  }

  return (
    <div className={classes.root}>
      <ExpansionPanel style={style}>
        <ExpansionPanelSummary expandIcon={<ExpandMore />}>
          <Typography className={classes.heading}>{expansionLayout.label}</Typography>
        </ExpansionPanelSummary>
        <ExpansionPanelDetails>
          <MaterialLayoutRenderer {...childProps} />
        </ExpansionPanelDetails>
      </ExpansionPanel>
    </div>
  );
}


export default withStyles(styles)(AccordionPanel);
